import React from 'react';
import { Layout, Icon } from 'antd';
import './app.scss';
import {Route, Switch,Link} from 'react-router-dom'
import NavMenu from '../NavMenu/NavMenu';
import TabContent from '../TabContent/TabCotent';
// component
import WORK from '../Work/Work';
import FORMLIST from '../FormList/FormList'
import DBData from '../DBData'
import Loading from '../../common/Loading/Loading'

import { Config } from '../../config/config';
const { Header,Footer, Content } = Layout;


const NOTFOUND = function() {
  return <h2>NOTFOUND</h2>
}

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      mainHeight: null,
      collapsed: false,
      len:null
    }
  }
  componentWillMount() {
    this.setState({
      mainHeight: document.body.clientHeight
    })
    window.removeEventListener('resize', this.onWindowResize.bind(this))
  }

  onWindowResize(){
    this.setState({
      mainHeight: document.body.clientHeight
    })
  }

  componentDidMount() {
    // 初始化高度
    window.addEventListener('resize', this.onWindowResize.bind(this))
  }

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }

  getlistLen(num) {
    this.setState({
      len:num
    })
  }



  render() {
    const {mainHeight,collapsed} = this.state;
    return (
      <Layout className="main-container" id="main-container" style={{minHeight:mainHeight}}>
        <NavMenu getlistLen={this.getlistLen.bind(this)} collapsed={collapsed}></NavMenu>
        <Layout>
          <Header style={{ background: '#fff', padding: 0 }}>
            <Icon
              className="trigger"
              type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
              onClick={this.toggle}
            />
          </Header>
          <Content className={`${this.state.len > 0 ? '' : 'css-align-center'} antd-content`} style={{ margin: '24px 16px', padding: 5,background: '#fff', minHeight: 280 }}>
            <TabContent/>
            {
                // 这里的:tableName是根据页面路由来的 
                // 如果有它会自动判断
                this.state.len > 0 
                ?
                (
                  <Switch>
                    <Route path="/main" exact component={WORK}></Route>
                    <Route exact path="/form/list" component={FORMLIST}></Route>
                    <Route path="/form/add/:tableName/:type" component={DBData}></Route>
                    <Route path="/form/edit/:tableName/:type" component={DBData}></Route>
                    <Route path="/form/list/:tableName/:type" component={DBData}></Route>
                    <Route component={NOTFOUND}></Route>
                  </Switch>
                ) 
                :
                <Loading cls="danger" tip="主内容正在加载..." delay={1000} size="large" />
            }

          </Content>
          <Footer style={{ textAlign: 'center' }}>
            {
              Config.footerCompany
            }
            <Link to="/main">快速返回首页</Link>
          </Footer>
        </Layout>
      </Layout>
    );
  }
}

export default App
